<template>
  <div class="other-top-head head-fixed" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
    <div class="navbar-wrap">
      <div class="new-nav-page scroll-white" style="width: 100%">
        <headerCon></headerCon>
      </div>
    </div>
  </div>
  <div>
    <div class="crumb">
      <div class="container-1200 list-content">
        <ul class="left-nav">
          <li :class="isActiveIndex == index ? 'active' : ''" @click.stop="switchClick(index)"
            v-for="(item, index) in questionClassData" :key="index">{{ item.title }}</li>
        </ul>
        <div class="right-list-content " v-if="questionClassData[isActiveIndex]"
          :class="questionClassData[isActiveIndex]['question'].length == 0 ? 'right-empty-img' : ''">
          <div class="empty-text"
            :style="questionClassData[isActiveIndex]['question'].length == 0 ? 'display:block' : 'display:none'">
            <img class="empty-img" src="https://static.3d66.com/service/images/question/kong.png" alt="">
          </div>
          <h4>热门问题</h4>
          <ul class="list-problem problem-active clearfix">
            <el-collapse accordion>
              <el-collapse-item v-for="(qitem, qindex) in questionClassData[isActiveIndex]['question']" :key="qindex"
                :title="qitem.title" :name="qitem.id">
                <div v-if="qitem.text" v-html="qitem.text"></div>
                <div v-else>
                  <div style="    display: flex;
    justify-content: center;
    margin-top: 40px;">
                    <img src="https://static.3d66.com/service/images/question/kong.png" alt="">
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <footerContent></footerContent>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import headerCon from "../../components/header.vue";
import footerContent from "../../components/footerContent.vue";
import { questionClass } from "../../api/message/index";
const isActiveIndex = ref(0)
const switchClick = (index: number) => {
  isActiveIndex.value = index
}
//获取常见问题
const questionClassData = ref<any>([]);
questionClass({}).then((res: any) => {
  if (res.code == 1) {
    questionClassData.value = res.data
  }
}).catch((err) => {
  console.log(err)
})
onMounted(() => { });
onBeforeUnmount(() => { });
</script>
<style>
body {
  background: #f6f6f6 !important;
}
</style>
<style scoped lang="scss">
.crumb {
  width: 1200px;
  margin: 15px auto;
  height: calc(100vh - 282px);
  color: #999;
  padding-top: 80px;
}

.container-1200 {
  width: 1200px;
  margin: 0 auto;
}

.list-content .left-nav {
  float: left;
  width: 270px;
  min-height: 550px;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.list-content .left-nav li {
  height: 50px;
  line-height: 50px;
  padding: 0 27px 0 44px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
  cursor: pointer;
  background: #fff;
}

.list-content .left-nav li.active {
  color: #fff;
  background: #e85623;
}

.list-content div.right-empty-img {
  position: relative;
  min-height: 550px;
  background: #fff;
}

.list-content div.right-empty-img .empty-text {
  width: 376px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -188px;
}

.list-content div.right-empty-img .empty-text .empty-img {
  width: 376px;
  height: 250px;
  display: block;
}

.list-content div.right-empty-img .empty-text p {
  font-size: 14px;
  color: #999;
  text-align: center;
}

.list-content div.right-empty-img h4 {
  display: none;
}

.list-content div.right-empty-img ul.list-problem {
  display: none;
}

.list-content .right-list-content {
  float: right;
  width: 910px;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
}

.list-content .right-list-content .empty-text {
  display: none;
}

.list-content .right-list-content h4 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 18px;
  box-sizing: border-box;
  background: #ffffff;
  font-size: 16px;
  color: #333;
  font-weight: 400;
}

.list-content .right-list-content ul.problem-active {
  display: block;
}

.list-content .right-list-content .list-problem {
  background: #fff;
  padding: 0px 18px 0px 18px;
  min-height: 460px;
  display: none;
}

.list-content .right-list-content .list-problem li {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
}

.list-content .right-list-content .list-problem li:before {
  content: "";
  width: 5px;
  height: 5px;
  background: #e85623;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}

.list-content .right-list-content .list-problem li a {
  font-size: 14px;
  color: #888;
  line-height: 44px;
  margin-left: 8px;
}

.list-content .right-list-content .list-problem li a:hover {
  color: #e85623;
}
</style>
